<template>
    <!-- 默认card布局 -->
    <el-card :style="{}">
        <!-- 头部插槽 -->
        <template #header>
            <div class="card-header">
                <div class="card-header-title">{{ props.tableMiddleTitle }}</div>
                <div class="card-header-slot">
                    <!-- 转换一下插槽名称 并且添加插槽内容 -->
                    <slot name="header"></slot>
                </div>
            </div>
        </template>
        <!-- 表格内容渲染 -->
        <el-table :data="props.tableData ?? []"
            :height="props.tableConfig.height ?? 530"
            :border="props.tableConfig.border ?? true"
            :stripe="props.tableConfig.stripe ?? true"
            :size="props.tableConfig.size ?? 'default'"
            @selection-change="changeSelection"
            >
            <!-- 是否进行表格多选渲染 通过父页面配置tableConfig里的needSelection控制渲染 -->
            <el-table-column type="selection" align="center" v-if="props.tableConfig.needSelection" />
            <!-- 是否进行表格序号渲染 通过父页面配置tableConfig里的needIndex控制渲染 -->
            <el-table-column type="index" 
                :label="props.tableConfig.selectionLabel ?? '序号'" 
                :width="props.tableConfig.selectionWidth ?? 80" 
                :align="props.tableConfig.selectionAlign ?? 'left'"
                :header-align="props.tableConfig.selectionHeaderAlign ?? 'center'"
                v-if="props.tableConfig.needIndex"
                />
            <!-- 表格列渲染 通过父页面配置表格列的数组 进行表格列渲染 通过v-for进行循环 -->
            <el-table-column v-for="item in props.tableColumnList" 
                :key="item.prop" 
                :prop="item.prop"
                :align="item.align ?? 'left'"
                :header-align="item.headerAlign ?? 'center'"
                :width="item.width ?? '-'"
                :label="item.label"
                />
            <!-- 表格操作栏渲染 通过父页面配置tableConfig里的needOperation控制渲染 -->
            <el-table-column 
                :label="props.tableConfig.operationTitle ?? '操作'" 
                :align="props.tableConfig.operationAlign ?? 'center'"
                :header-align="props.tableConfig.operationHeaderAlign ?? 'center'"
                v-if="props.tableConfig.needOperation"
                >
                <!-- 表格操作插槽 改变插槽名称 绑定行数据，并将行数据 scope 丢给插槽的使用者 -->
                <template #default="scope">
                    <slot name="operation" v-bind="scope" />
                </template>
            </el-table-column>
        </el-table>
    </el-card>
</template>
<script setup lang="ts">
const props = defineProps({
    tableMiddleTitle: {
        type: String,
        default: '',
        required: true // 是否为必传项
    },
    tableData: {
        type: Array,
        default: []
    },
    tableConfig: {
        type: Object,
        default: {}
    },
    tableColumnList: {
        type: Array<any>,
        default: [],
        required: true // 这个也为必传项
    }
})
const emit = defineEmits(['changeSelect'])
const changeSelection = (row: Array<any>) => {
    emit('changeSelect', row)
}
</script>

<style lang="less" scoped>
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>